<template>
  <div class="container">
    <el-form :model='userParams' ref='userParams' size='medium' label-width="100px">
      <el-row :gutter='20'>
        <el-col :span='8' :offset='0'>
          <el-form-item label='角色名称'>
            <el-input v-model='userParams.name' disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <el-form-item label='英文名称'>
            <el-input v-model='userParams.enname' disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <el-form-item label='角色类型'>
            <el-input v-model='userParams.role_type' disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <el-form-item label='数据范围'>
            <el-input v-model='userParams.data_scope_name' disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='16' :offset='0'>
          <div class="center">
            <el-button type="primary" size="default" @click="pushRole">分配权限</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data='tableData' border stripe :height='offsetHeight' v-loading='loading' ref='tableData'>
      <el-table-column type='index' label='序号' width='80' align='center'>
      </el-table-column>
      <el-table-column prop='company_name' label='归属公司' align='center'>
      </el-table-column>
      <el-table-column prop='login_name' label='登录名' align='center'>
      </el-table-column>
      <el-table-column prop='name' label='姓名' align='center'>
      </el-table-column>
      <el-table-column prop='mobile' label='手机号' align='center'>
      </el-table-column>
      <el-table-column label='操作' width="100" align='center'>
        <template slot-scope='{row}'>
          <el-button type="danger" size="mini" @click="remove(row.id)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 接口权限 -->
    <el-dialog title="修改权限接口" :visible.sync="editShow" width="70%" @close="cancel" append-to-body
      :destroy-on-close="true">
      <edit :role-id="this.userParams.id" :f-user="fUser" @cancel="cancel"></edit>
    </el-dialog>
  </div>
</template>

<script>
import Edit from './edit.vue'
export default {
  name: '',
  components: {
    Edit
  },
  props: {
    userParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 300,
      loading: false,
      tableData: [],
      editShow: false,
      fUser: []
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('sysRoleUser', {
        role_id: this.userParams.id
      })
      this.tableData = res
      this.fUser = res
      this.loading = false
    },
    pushRole () {
      this.editShow = true
    },
    async remove (id) {
      const res = await this.$http('sysRoleUserDel', {
        role_id: this.userParams.id,
        user_id: id
      })
      this.$tips.success(res.errmsg)
      this.init()
    },
    cancel () {
      this.editShow = false
      this.init()
    }
  },
  computed: {
  }
}
</script>
<style lang='scss' scoped>
</style>